<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本</title>
    <style>
      div {
        /* 宽度 */
        width: 150px;
        background-color: #569cd6;

        /* 文本样式 text-xxx系列 */
        /* 
          text-align  文本水平对齐方式
          left(默认值)     左对齐
          right           右对齐
          center          居中
        */
        text-align: center;
      }

      div:hover{
        box-shadow: 2px 2px 1px #ccc;
      }

      p {
        /* 文本缩进 */
        text-indent: 2rem;

        /* 文字方向,ltr左到右默认,rtl右到左 */
        /* direction: rtl; */

        /* 字符间隔 */
        /* letter-spacing: 10px; */

        /* 单词间距 */
        /* word-spacing: 10px; */

        /* 
            空白处理方式
            nowrap(重点关注)        不换行,产生水平滚动条,直到遇到<br/>
            pre                     相当于pre标签
        */
        white-space: pre;
      }

      p:hover{
        /* 
            文字阴影text-shadow / 盒子阴影 box-shadow
            参数1: 阴影水平位移,正右负左
            参数2: 阴影垂直位移,正下负上
            参数3: 阴影的实体清晰度,数值越小越实体,数值越大,越虚幻
            参数4: 阴影的颜色
        */
        text-shadow: 2px 2px 1px purple;
      }

      a {
        /* 
          文本修饰方式 
          选项
          none  极其常用,用于去除超链接默认的下划线
          underline,overline,line-through 不常用
        */
        text-decoration: none;
      }

      img{
        /* 
          文本垂直对齐方式
          数值,可正可负
          middle      以小写x中心为准线的对齐
          baseline    基线对齐,以大写字母和部分小写字母最下沿为基准的对齐(除去类似于y,q...)
        */
        vertical-align: -3px;
      }
    </style>
  </head>
  <body>
    <div>按钮</div>

    <p>
      这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
    </p>

    <p>Hello World Hello World Hello World</p>

    <p>
      function add(a,b){ 
          return a + b 
      } 
      let r = add(3,4) 
      console.log(r)
    </p>

    <a href="#">跳转</a>

    <br>

    <img src="img/connect.png">XYZxyz联系我们
  </body>
</html>
